<template>
	<view class="h-area h-head-area">
		<view class="home-head-top">
			<view class="home-top-img flex">
				<view class="home-top1" />
				<view class="home-top2" />
			</view>
			<view class="home-head-text">
				<view class="tipx"> 你好,嘻嘻嘻 </view>
				<view class="tipx"> 你的心客户又增加了15名 加油吖</view>
			</view>
		</view>


		<view class="bar"></view>
		<view class="infos flex">
			<view class="left flex1">
				<view class="flex">
					<view class="flex1"> 访客:132位 </view>
					<view class="flex1"> 回头率:32.3% </view>
				</view>
				<view class="flex">
					<view class="flex1"> 房源:132套 </view>
					<view class="flex1"> 房源关注:32套 </view>
				</view>
				<view class="flex">
					<view class="flex"> 本周新客: <view class="bg-number"> 20 </view>
					</view>
					<view class="flex pm"> 排名: <view class="bg-number"> 14 </view>
					</view>
				</view>

				<view class="meto"> 座右铭: </view>
				<view class="meto-info ellipsis"> {{user.motto ||'你今天走的每一步都会算数!' }} </view>

			</view>
			<view class="right user-head-area" @click="toPage('/pages/user/index')">
				<view class="user-head-icon item-img" :style="getItemImg(user)"></view>
				<view class="user-info">
					<view class="name"> {{user.realname || user.nikename}} </view>
					<view class="no"> NO: {{user.userId}} </view>
				</view>
			</view>
		</view>
		<view class="bar"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                user:{}
			};
		},
		created() {
			this.user = this.$store.apiUserInfo
			this.user = JSON.parse(uni.getStorageSync('user'))
			console.log("加载的用户信息",this.user,this.toPage );
		},
		methods:{
			getItemImg(e){
				console.log("数据",e);
				var url = e.avatar
				console.log("数据",url);
				var background = `url(${url}) center center / 100% 100%`; 
				return { background } 
			},
		}
	}
</script>

<style lang="scss">
	.h-head-area {

		/*头部*/
		.home-top-img {
			justify-content: space-between;
		}

		.home-top1 {
			width: 50px;
			height: 50px;
			background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/top1.png) center center / 100% 100%;
			border-radius: 50%;
		}

		.home-top2 {
			width: 100px;
			height: 50px;
			background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/app1.png) center center / 100% 100%;
		}


		.home-head-top {
			background: #F9CF00;
			padding: 10px 20px;
		}

		.home-head-text {
			position: relative;
			margin-top: 10px;
			background: #fff;
			padding: 10px 20px;
			border-radius: 10px;
			font-size: 12px;
		}

		.home-head-text:before {
			content: "";
			border: 10px solid transparent;
			border-bottom-color: #fff;
			position: absolute;
			left: 20px;
			top: 0;
			margin-top: -20px;

		}

		.home-head-text:after {
			content: "";
			border: 10px solid transparent;
			border-bottom-color: white;
			position: absolute;
			top: 0;
			left: 20px;
			margin-top: -19px;
		}
        .tipx{
			font-weight: 600;
			margin-bottom: 8px;
		}
		/*数据*/
		.infos{
			align-items: flex-start;
		}
		.pm {
			margin-left: 20px;
		}
        .flex1{
			margin-bottom: 10px;
		}
		.bg-number {
			font-size: 20px;
			font-weight: 600;
		}

		.user-head-icon {
			width: 110px;
			height: 110px;
			border: 1PX solid #ccc;
		}

		.user-info {
			background: #FBD100;
			margin-top: 4px;
			padding: 4px;
		}

		.no {
			margin-top: 5px;
		}

		.meto {
			width: 60px;
			margin-top: 20px;
			color: #fff;
			background: #FBD100;
			padding: 2px 6px;
		}

		.meto-info {
			font-size: 16px;
			font-weight: 600;
			padding: 10px 0 0 0;
			width: 200px;
		}
	}
</style>
